<template>
  <a-layout style="min-height: 100vh; background: #fff">
    <a-layout>
      <a-layout-content style="background: #fff">
        <a-row>
          
          <a-col :span="24">
        <a-carousel autoplay >
          <div>
            <h3>
              <img style="height: 500px;width: 100%;" src="https://pic3.zhimg.com/v2-c512047e3c9dbd42ad625f08095959ec_1440w.jpg?source=172ae18b" />
            </h3>
          </div>
          <div>
            <h3>
              <img style="height: 500px;width: 100%;" src="https://pic3.zhimg.com/80/v2-9eaed223c68efeeb7db605825df5240e_720w.jpg" />
            </h3>
          </div>
          <div>
            <h3>
              <img style="height: 500px;width: 100%;" src="https://img1.baidu.com/it/u=1440144124,2567288636&fm=26&fmt=auto" /></h3>
          </div>
          <div>
            <h3>
              <img style="height: 500px;width: 100%;" src="https://img2.baidu.com/it/u=4113210440,824494321&fm=253&fmt=auto&app=138&f=JPEG?w=554&h=291" /></h3>
          </div>
        </a-carousel>
        </a-col>
        </a-row>
        <div align="center" style="font-size:35px; font-weight: bold"> 创业信息</div>
        <a-tabs style="text-align: center;font-size: 40px"  v-model:activeKey="activeKey">
          
            <a-tab-pane style="font-size:40px" key="1" tab="高新技术"></a-tab-pane>
            <a-tab-pane key="2" tab="电子商务" ></a-tab-pane>
            <a-tab-pane key="3" tab="人工智能"></a-tab-pane>
            <a-tab-pane key="4" tab="生物科技" ></a-tab-pane>
            <a-tab-pane key="5" tab="文化创意"></a-tab-pane>
          </a-tabs>
        <a-row :gutter="[16, 8]">
          <a-col v-for="item in project" :key="item.p_id" :span="24 / 2">
            <div align="center">
         <a-card  @click="toDetail(item.p_id)" hoverable style="width: 80%;text-align: center ;height: 200px;">
                    <template #cover>
                      
                      <img
                        height="300"
                        alt="example"
                        :src="item.p_url"
                      />
                    </template>
                    <template #actions>
                      <setting-outlined key="setting" />
                      <edit-outlined key="item.p_id" />
                      <ellipsis-outlined key="ellipsis" />
                    </template>
                    <a-card-meta :title="item.p_title" description="">
                      <template #avatar>
                        <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                      </template>
                    </a-card-meta>
                  </a-card>
            </div>
          </a-col>
        </a-row>
      </a-layout-content>
      <a-layout-footer style="background: #fff; text-align: center"></a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script setup>
  import {
    FireOutlined,
    PieChartOutlined,
    DesktopOutlined,
    UserOutlined,
    TeamOutlined,
    FileOutlined,
  } from "@ant-design/icons-vue";
  import { defineComponent, ref,reactive, } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import { get, post, tip } from "@/common"; //基础   
    const project = ref([]);
    const getprojectlist=()=>{
      post("/project/show").then((res) =>{
            console.log(res);
            project.value=res.data;
            console.log(project.value);
        });

    };

    getprojectlist();
      const router = useRouter(); //获取用户路由
      const top = ref(65);
      const toPage = () => {
        router.push({ path: "/home/detail" });
      };
      const toDetail = (gh) => {
      sessionStorage.setItem("p_id", gh);
      // console.log(sessionStorage.getItem("p_id"));
      router.push({ path: "/home/detail" });
 
    };
</script>
<style >
  .ant-tabs-nav .ant-tabs-tab {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    font-size: 25px;
    height: 100%;
    margin: 0 32px 0 0;
    padding: 12px 16px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  .ant-carousel :deep(.slick-slide) {
    text-align: center;
    height: 500px;
    line-height: 500px;
    background: #364d79;
    overflow: hidden;
  }

  .ant-carousel :deep(.slick-slide h3) {
    color: #fff;
  }
  .ant-tabs-nav .ant-tabs-tab {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    font-size: 25px;
    height: 100%;
    margin: 0 50px 0 0;
    padding: 12px 16px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}
</style>